import { FC ,useContext} from "react";
import style from './index.module.scss'
import { infoType } from "@/store/MessageStore";
import classnames from 'classnames/bind'
import { OutContext } from "@/pages/index";
import { useSelector } from "react-redux";
import { stateType } from "@/store";
import Taro from "@tarojs/taro";
const CBN = classnames.bind(style)

type PrologueMessageType = infoType & {
    position: 'left' | 'right',
}

const PrologueMessage: FC<PrologueMessageType> = (props) => {
    const { value, type, position, isSuccess = 'false' } = props
    const {sendMessage} = useContext(OutContext)!
    const {isend} = useSelector((state:stateType)=>state.TokenReduce)
    const TotalCls = {
        'PrologueMessage': true,
        'left': position === 'left',
        'right': position === 'right',
    }
    const prologueArr = value.split('\n').map((item)=>{
        return {
            id:new Date().getTime()+Math.floor(Math.random() * 900) + 100 + '',
            value:item
        }
    })
    const selectAItips = (item:string)=>{
        if(!isend){
            Taro.showToast({
                title:'请等待AI回答结束',
                icon:'none'
            })
            return
        }
        sendMessage({
            type:'text',
            value:item
        })
    }

    return <div className={CBN(TotalCls)}>
        <div className={CBN('left')}>
            猜猜你想问什么
        </div>
        <div className={CBN('right')}>
            {prologueArr.map((item, index) => {
                return <div  key={item.id}>
                    {index === 0 ? null : <div className={CBN('item')} onClick={() => {
                        selectAItips(item.value.replace('-',''))
                    }}>
                        {item.value.replace('-','')}
                    </div>}
                </div>
            })}
        </div>
    </div>
}




export default PrologueMessage